<template v-clock>
  <div class="dashboard-container">
    <el-row :gutter="16" class="firRow" type="flex" justify="space-between">
      <el-col :span="8">
        <el-card shadow="hover">
          <cus-count
            v-if="checkPermission(['account@index'])"
            :toTime="toTime"
          />
          <no-permiss v-else />
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card shadow="hover">
          <cus-chart v-if="checkPermission(['account@index'])" />
          <no-permiss v-else />
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="16" class="secRow" type="flex" justify="space-between">
      <el-col :span="12">
        <el-card shadow="hover">
          <cus-count-second v-if="checkPermission(['openCheck@index'])" />
          <no-permiss v-else />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <open-check v-if="checkPermission(['openCheck@index'])" />
          <no-permiss v-else />
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="12" class="secRow" type="flex" justify="space-between">
      <el-col :span="12">
        <el-card shadow="hover">
          <scenes-count v-if="checkPermission(['appointment@index'])" />
          <no-permiss v-else />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <accounts-count v-if="checkPermission(['payment@index'])" />
          <no-permiss v-else />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CusCount from "./dashboard/cus_count";
import CusChart from "./dashboard/cus_chart";
import CusCountSecond from "./dashboard/cus_count_second";
import OpenCheck from "./dashboard/open_check";
import AccountsCount from "./dashboard/accounts_count";
import ScenesCount from "./dashboard/scenes_count";
import NoPermiss from "./dashboard/no_permiss";
import { getDataTime } from "@/api/home";

export default {
  name: "Dashboard",
  components: {
    CusCount,
    CusChart,
    CusCountSecond,
    OpenCheck,
    AccountsCount,
    ScenesCount,
    NoPermiss,
  },
  data() {
    return {
      toTime: {},
    };
  },
  mounted() {
    document.title = this.$t("Home.index31");
    this.getDataTime();
  },
  methods: {
    getDataTime() {
      getDataTime()
        .then((res) => {
          if (res.code == 10000) {
            this.toTime = res.data;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((error) => {
          this.$message.error(error.Error);
        });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss">
.dashboard-container {
  .el-card__body {
    padding: 25px 30px;
  }
  .el-card {
    height: 320px;
  }
  .secRow {
    margin: 15px 0;
  }

  .home_card {
    cursor: pointer;
    .rowTitle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 18px;
      color: #333333;
      font-weight: bold;
      margin-bottom: 20px;
    }
  }
  h2 {
    font-size: 24px;
  }
}
</style>
